<template>
    <div class="wrapper">
            <!--header部分-->
            <header>
                <p>在线支付</p>
            </header>

            <!--订单信息部分-->
            <h3>订单信息：</h3>
            <div class="order-info">
                <p>{{orders.business.businessName}}
                    <i class="fa fa-caret-down" @click="detailetShow"></i>
                </p>
                <p>{{this.$formatMoney(orders.orderTotal, '￥')}}</p>
            </div>

            <!--订单明细部分-->
            <ul class="order-detailet"  v-show="isShowDetailet">
                <!--detail box 用于表示一个用于展示详细信息的容器或框。-->
                <li v-for="item in orders.list" :key="item.id">
                    <p>{{item.food.foodName}} x {{item.quantity}}</p>
                    <p>{{this.$formatMoney(item.food.foodPrice*item.quantity, '￥')}}</p>
                </li>
                <li>
                    <p>配送费</p>

                    <p>{{this.$formatMoney(orders.business.deliveryPrice, '￥')}}</p>

                </li>
            </ul>

            <!--支付方式部分-->
            <ul class="payment-type">
                <li :class="{active:selectedPayment==='alipay' }">
                    <label>
                        <input type="radio" style="hidden-radio" v-model="selectedPayment" value="alipay">
                        <img src="../assets/alipay.png">
                        <i class="fa fa-check-circle" v-show="selectedPayment==='alipay'"></i>
                    </label>
                </li>
                <li :class="{active:selectedPayment==='wechat' }">
                    <label>
                        <input type="radio" style="hidden-radio" v-model="selectedPayment" value="wechat">
                        <img src="../assets/wechat.png">
                        <i class="fa fa-check-circle" v-show="selectedPayment==='wechat'"></i>
                    </label>    
                </li>
            </ul>
            <div class="payment-button">
                <button @click="confirmPayment">确认支付</button>
            </div>

            <!--底部菜单部分-->
            <footer-page></footer-page>
        </div>
</template>

<script>
import FooterPage from '../components/FooterPage.vue';
import { onBeforeUnmount, onMounted } from 'vue';

export default{
    name:'PaymentPage',
    data(){
        return{
            orderId: this.$route.query.orderId,
            orders:{
                business: {
                    businessName:{}
                }
            },
            isShowDetailet:false,
            selectedPayment: 'alipay',//默认使用支付宝
        }
    },
    created(){
        let url_getOrders = `/OrdersController/getOrdersById/${this.orderId}`;
        this.$axios.get(url_getOrders)
        .then(response=>{
            this.orders = response.data.result;
        })
        .catch(error=>{
            console.error(error);
        });

    },
    //改用vue3的写法，实现一旦路由到在线支付组件，就不能回到订单确认组件
    setup(){
        //定义了handlePopstate函数，用于处理popstate事件的回调
        //popstate事件在浏览器的历史记录（即前进或后退）发生变化时触发
        const handlePopstate = () =>{
            this.$router.push({path : '/index'});
        };
        onMounted(() => {
            //将当前URL添加到浏览器的历史记录
            history.pushState(null, null, document.URL);
            //监听popstate事件，当浏览器的历史记录发生变化时执行handlePopstate回调函数
            window.addEventListener('popstate',handlePopstate);
        });
        onBeforeUnmount(() => {
            //移除对popstate事件的监听
            window.removeEventListener('popstate', handlePopstate);
        })
    },
    methods:{
        detailetShow(){
            this.isShowDetailet = !this.isShowDetailet;
        },
        confirmPayment(){
            if(this.selectedPayment === 'alipay'){
                console.log('选择了支付宝支付');
            } else if(this.selectedPayment === 'wechat'){
                console.log('选择了微信支付');
            }else{
                console.log('请选择支付方式');
            }
            this.$router.push({path:'/payDone', query:{orderId: this.orderId, orderTotal: this.orders.orderTotal}});
            let url_pay = `/OrdersController/finishOrders/${this.orderId}`;
            this.$axios.put(url_pay)
            .then(response =>{ 
                if(response.data.result !== 0){
                    this.$router.push({path:'/payDone', query:{orderId: this.orderId, orderTotal: this.orders.orderTotal}});
                }else{
                    alert('订单支付失败！')
                }
            })
            .catch(error => {
                console.error(error);//调用 console.error() 方法，用于将错误信息输出到控制台
            });
	
        }
    },
    components: { FooterPage }   
}
</script>

<style scoped>
/*********总容器************/
.wrapper{
    height: 100%;
    width: 100%;
}

/*********header部分********/
.wrapper header{
    width: 100%;
    height: 12vw;

    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    /* 给予高层叠级别 */
    z-index: 1000;

    /* 位置上下左右居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/*********订单信息部分*********/
.wrapper h3{
    font-size: 4vw;
    font-weight: 300;
    color: #999;

    margin-top: 12vw; /* 利用外边距隔开header部分 */
    box-sizing: border-box;
    padding: 4vw 4vw 0; /* 上、右、下、左，其中左和右相同 */

}
.wrapper .order-info{
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    box-sizing: border-box;
    padding: 4vw;

    font-size: 4vw;
    color: #666;
}
.wrapper .order-info p:last-child{
    color: orangered;
}

/***********订单明细部分************/
.wrapper .order-detailet{
    width: 100%;
}
.wrapper .order-detailet li{
    width: 100%;
    box-sizing: border-box;
    padding: 1vw 4vw;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper .order-detailet li p{
    font-size: 3vw;
    color: #666;
}

/***********支付方式部分**********/
.wrapper .payment-type{
    width: 100%;
}
.wrapper .payment-type li{
    width: 100%;
    box-sizing: border-box;
    padding: 4vw;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper .payment-type li img{
    width: 33vw;
    height: 8.9vw;
}
.wrapper .payment-type li .fa-check-circle{
    position: absolute;
    right: 40px; /* 右侧空白调整 */
    font-size: 5vw;
    color: #38CA73;
}
.wrapper .payment-button{
    width: 100%;
    box-sizing: border-box;
    padding: 4vw;
}
.wrapper .payment-type li input{
    display: none;
}
.wrapper .payment-button button{
    width: 100%;
    height: 10vw;

    border: none;/* 去掉边框 */
    outline: none; /* 去掉外轮廓线 */

    color:  #fff;
    background-color:  #38CA73;

    border-radius: 4px;
}
 
</style>